<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="陈嘉乐">
    <title></title>
    <style>
        *{
            box-sizing: border-box;
        }
        .container{
             width: 420px;
             height: 600px;
               margin: 0 auto;
               /* border: 1px  solid; */
               
       }
       .container img{
           width: 100px;
           height: 100px;

           
       }
     .container #first{
              width: 300px;
              height: 300px;
     }
   .top{
       float: right;
       
      /* margin-right: -20px; */
      margin-top: 5px;
   }
.clear{
    clear: both;
}
    </style>
</head>
<body>
   
 <div class="container">
     
    <img src="big_1.jpg" alt="" id="first">
    <div class="top">
    <img src="big_1.jpg" alt=""  ><br>
    <img src="big_2.jpg" alt=""><br>
    <img src="big_3.jpg" alt="">
    </div>
<div class="clear"></div>
   <div class="bottom">
    <img src="big_4.jpg" alt="">
    <img src="big_5.jpg" alt="">
    <img src="big_6.jpg" alt="">
    <img src="big_7.jpg" alt="">
    <img src="big_8.jpg" alt="">
    <img src="big_9.jpg" alt="">
    <img src="big_10.jpg" alt="">
    <img src="big_11.jpg" alt="">
</div>
 </div>

</body>
</html>
<script>
var imgs = document.querySelectorAll('img');
 var first = document.getElementById('first');
 var index = 0;
 for (var i = 0; i < imgs.length; i++) {
       
     imgs[i].index=i+1;
     imgs[i].onmouseover = function () {
         first.src = "big_"+this.index+".jpg";
     }

 }
</script>